<template>
  <div id="searchView" class="searchView">
    <a-space direction="vertical" size="large" fill>
      <a-input-search
        v-model:value="searchParams.searchText"
        :default-value="searchParams.searchText"
        class="centered"
        :style="{ width: '480px' }"
        placeholder="请输入搜索内容"
        search-button
        @input="onSearch"
        @search="onSearch"
        size="large"
      />
      <a-tabs
        v-model:activeKey="activeKey"
        @change="onTabChange"
        size="large"
        style="margin: 0 auto; width: 70%"
        class="centered-tabs"
      >
        <a-tab-pane key="question">
          <template #title>
            <icon-calendar />
            题目
          </template>
          <QuestionPage />
        </a-tab-pane>
        <a-tab-pane key="post">
          <template #title>
            <icon-bookmark />
            帖子
          </template>
          <PostPage />
        </a-tab-pane>
        <a-tab-pane key="user">
          <template #title>
            <icon-user />
            用户
          </template>
          <UserPage />
        </a-tab-pane>
        <a-tab-pane key="picture">
          <template #title>
            <icon-image />
            图片
          </template>
          <PicturePage />
        </a-tab-pane>
      </a-tabs>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import QuestionPage from "@/components/QuestionPage.vue";
import PostPage from "@/components/PostPage.vue";
import UserPage from "@/components/UserPage.vue";
import { useRoute, useRouter } from "vue-router";
import PicturePage from "@/components/PicturePage.vue";
import PostView from "@/views/post/PostView.vue";
import PostPageNew from "@/components/PostPageNew.vue";

//拿去当前页面信息使用次函数
const route = useRoute();
const router = useRouter();

const activeKey = route.params.category;

const searchParams = ref({
  searchText: "",
});

watchEffect(() => {
  searchParams.value = {
    searchText: route.query.searchText,
  } as never;
});

// 将搜索框上的内容同步到url上
const onSearch = (value: string) => {
  if (value) {
    searchParams.value = {
      ...searchParams.value,
      searchText: value,
    };
    router.push({
      query: {
        ...searchParams.value,
        pageSize: 10,
        current: 1,
      },
    });
  } else {
    router.push({
      query: {
        pageSize: 10,
        current: 1,
      },
    });
  }
};
const onTabChange = (key: string) => {
  router.push({
    path: `/search/${key}`,
    query: searchParams.value,
  });
};
</script>

<style scoped>
#searchView {
  text-align: center;
  margin: 0 auto;
  background-color: #f7f8fa;
  padding-top: 20px;
}

.searchView {
}

.centered {
  margin: 0 auto;
}

.centered-tabs {
  text-align: center;
}
</style>
